<template>
    <app-layout>
        <view v-if="goods.id == 0" class="u-goods-detail"></view>
        <view class="app-goods" v-show="loading" v-if="goods.id > 0">
            <view class="banner">
                <app-banner
                    :videoUrl="goods.video_url"
                    :share="goods.share"
                    :picList="goods.pic_url"
                    :goods_id="goods_id"
                    :isCart="false"
                    sign="weekly_buy"
                ></app-banner>
                <view v-if="goods && goods.plugin && goods.plugin.reset_time && goods.plugin.reset_time > 0" class="reset-area" :style="{'background-color': getTheme.background}">
                    <image src="./../image/goods.png"></image>
                    <view class="dir-left-nowrap cross-center reset-time">
                        <view style="margin-right: 8rpx;">距离活动结束</view>
                        <view class="time">{{day}}</view>
                        <view>天</view>
                        <view class="time">{{hour}}</view>
                        <view>时</view>
                        <view class="time">{{min}}</view>
                        <view>分</view>
                        <view class="time">{{sec}}</view>
                        <view>秒</view>
                    </view>
                </view>
            </view>
            <bd-info
                v-if="goods && goods.id > 0"
                :theme="getTheme"
                :name="goods.name"
                :is-negotiable="goods.is_negotiable"
                :subtitle="goods.subtitle"
                :flash-sale="flash_sale"
                :level-show="goods.level_show"
                :price="goods.price"
                :original-price="goods.original_price"
                :price-max="goods.price_max"
                :price-min="goods.price_min"
                :price-member-max="goods.price_member_max"
                :price-member-min="goods.price_member_min"
                :discount='discount'
                :is-vip-card-user="is_vip_card_user"
                :sales="goods.sales"
                :unit="goods.unit"
                :is-sales="goods.is_sales"
                :is-vip="is_vip"
                :goods-id="goods.id"
                :extra-quick-share="goods.extra_quick_share"
                :app-share-pic="goods.app_share_pic"
                :app-share-title="goods.app_share_title"
                :poster-config="poster_config + `&goods_id=` + goods.id"
                :poster-generate="poster_generate + `&goods_id=` + goods.id"
                :has-poster-nav="true"
                v-bind:goods="goods"
                @share="hShareAppMessage"
				:limit-buy="goods.limit_buy"
            >
            </bd-info>
            <view class="procedure main-center cross-center">
                <image :style="{'background-color': getTheme.background}" src="./../image/procedure.png"></image>
            </view>
            <!--商品优惠券-->
            <bd-coupon v-if="goods && goods.id > 0" @change="setCoupon" :theme="getTheme" :coupons="goods.goods_coupon_center"></bd-coupon>
            <bd-xbc
                v-if="goods && goods.id > 0"
                :coAttr="is_open"
                :type="goods.type"
                :guarantee-title="goods.guarantee_title"
                :guarantee-pic="goods.guarantee_pic"
                :param_content="goods.param_content"
                :param_name="goods.param_name"
                :services="goods.services"
                :attr-groups="goods.attr_groups"
                :goods-stock="goods.goods_num"
                @openAttr="clickAttr"
            ></bd-xbc>
            <!--商品信息-->
            <bd-hc
                v-if="goods && goods.goods_marketing_award"
                :integral="goods.goods_marketing_award.integral"
                :coupon="goods.goods_marketing_award.coupon"
                :card="goods.goods_marketing_award.card"
                :balance="goods.goods_marketing_award.balance"
                :theme="getTheme"
            ></bd-hc>
            <bd-kb
                v-if="goods && goods.goods_marketing_award"
                :limit="goods.goods_marketing.limit"
                :express="goods.express"
                :shipping="goods.goods_marketing.shipping"
                :pickup="goods.goods_marketing.pickup"
            ></bd-kb>
            <view class="attr">
                <u-attr
                    v-if="goods.id > 0"
                    :is_show_left="is_show_price"
                    :is_show_price="is_show_price"
                    :autoClose="!attrShow"
                    v-model="attrShow"
                    :goods="goods"
                    :theme="getTheme"
                    :checked="checked"
                    @check="check"
                    sign="weekly_buy"
                    :week_number="group ?group.number : ''"
                    :right-func="!is_show_price"
                    @rightFunc="rightFunc"
                >
                    <view slot="priceBefore" class="price">
                        <template v-if="choose_group">
                            ￥<text class="big-text">{{goods.level_show === 1 ? choose_group.price_member :  choose_group.price}}</text><text v-if="group && group.number > 0">x<text class="big-text">{{group.number}}</text><text style="font-weight: 600">期</text></text>
                        </template>
                    </view>
                    <view slot="afterList">
                        <view class="group">
                            <view class="group-name" style="font-weight: 600;color: #333333">{{goods && goods.plugin && goods.plugin.week_custom ? goods.plugin.week_custom : '期数'}}</view>
                            <view class="dir-left-wrap" v-if="goods.groups && group">
                                <view :class="['group-item', attr.group_id == group.group_id ? 'checked' : 'unchecked']"
                                      :style="{'background-color': attr.group_id == group.group_id ? getTheme.background_o : '','color': attr.group_id == group.group_id ? getTheme.color : '','border-color': attr.group_id == group.group_id ? getTheme.border : 'transparent'}"
                                      @click="storeAttr(attr)"
                                      v-for="(attr, key) in goods.groups" :key="key">
                                    {{attr.title ? attr.title : attr.number + '期'}}
                                </view>
                            </view>
                        </view>
                        <view class="group" v-if="goods.plugin">
                            <view class="group-name dir-left-nowrap cross-center">
                                <view style="font-weight: 600;color: #333333">配送时间</view>
                                <view class="week-type">{{goods.plugin.type}}</view>
                                <image v-if="week && goods && goods.plugin && goods.plugin.week_type && goods.plugin.type_list && (goods.plugin.week_type < 6 || (goods.plugin.week_type == 6 && goods.plugin.type_list.length < 6))" src="./../image/tips.png"></image>
                                <view class="week-last" v-if="week && goods && goods.plugin && goods.plugin.week_type && goods.plugin.type_list && (goods.plugin.week_type < 6 || (goods.plugin.week_type == 6 && goods.plugin.type_list.length < 6))">{{week.least_time}}</view>
                                <view v-else class="dir-right-nowrap cross-center box-grow-1 show-all-date" @click="showAllDate">
                                    <image :style="{'background-color': getTheme.background}" src="./../image/white-arrow.png"></image>
                                    <view :style="{'color': getTheme.color}">查看全部配送日期</view>
                                </view>
                            </view>
                            <view class="dir-left-wrap" v-if="goods.plugin.list && goods.plugin.list.length < 8">
                                <view :class="['group-item', item.week_key == week.week_key ? 'checked' : 'unchecked']"
                                      :style="{'background-color': item.week_key == week.week_key ? getTheme.background_o : '','color': item.week_key == week.week_key ? getTheme.color : '','border-color': item.week_key == week.week_key ? getTheme.border : 'transparent'}"
                                      @click="chooseWeek(item)"
                                      v-for="(item, key) in goods.plugin.list" :key="key">
                                    {{item.week_val}}
                                </view>
                            </view>
                            <view class="dir-left-wrap" v-else>
                                <view v-if="week" class="group-item checked"
                                      :style="{'background-color': getTheme.background_o,'color': getTheme.color,'border-color': getTheme.border}">
                                    {{week.week_val}}
                                </view>
                                <view class="group-item unchecked main-center cross-center"
                                      style="border-color:transparent"
                                      @click="toChooseTime">
                                    <view>{{week ? '修改配送日期' : '选择配送日期'}}</view>
                                    <image class="arrow" src="./../image/right-arrow.png"></image>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view slot="afterNumber" class="dir-right-nowrap cross-center total" v-if="goods">
                        <view class="price">￥{{totalPrice}}</view>
                        <view>小计：</view>
                        <view class="number">共{{choose_number}}{{goods.unit}}</view>
                    </view>
                </u-attr>
            </view>
            <bd-comments v-if="goods.id" :goods-id="goods.id"></bd-comments>
            <!--商品详情-->
            <bd-detail :detail="goods.detail"></bd-detail>
            <!--空格区域-->
            <view class="safe-area-inset-bottom u-bottom">
                <view class="u-bottom-height" :class="uBottomHeight"></view>
            </view>
            <!--底部按钮-->
            <view v-if="is_open == 1" class="safe-area-inset-bottom u-bottom-fixed">
                <view v-if="full_reduce">
                    <app-goods-full-reduce
                        :theme="getTheme"
                        :full_reduce="full_reduce"
                        :sign="goods.type === 'goods' ? '' : 1"
                    >
                    </app-goods-full-reduce>
                </view>
				<view v-if="goods.sell_time > 0">
					<app-sell-tip :time="goods.sell_time" @changeTime="changeTime"></app-sell-tip>
				</view>
                <view class="bd-bottom u-bottom-height-0 dir-left-nowrap cross-center" >
                    <view class="bd-back dir-top-nowrap main-center cross-center box-grow-0" @click="back">
                        <image class="bd-icon" src="../../../static/image/icon/index.png"></image>
                        <text class="bd-text">首页</text>
                    </view>
                    <bd-service :name="goods.name" :url="webUrl"></bd-service>
                    <view class="bd-back dir-top-nowrap main-center cross-center box-grow-0" @click="favorite">
                        <image class="bd-icon" :src="goods.favorite ? '../../../static/image/icon/icon-favorite-active.png' : '../../../static/image/icon/icon-favorite.png'"></image>
                        <text class="bd-text">收藏</text>
                    </view>
                    <view class="u-btn box-grow-1" @click="clickAttr(0)" :style="{'background': getTheme.background_gradient_btn,'color': getTheme.main_text,'opacity': '0.5'}" v-if="!goods.buy_goods_auth">
                        <app-jump-button :open_type="buy_goods_auth_link.open_type" :url="buy_goods_auth_link.new_link_url" :params="buy_goods_auth_link.params">
                            {{buy_goods_auth_text}}
                        </app-jump-button>
                    </view>
                    <view v-else-if="goods.goods_num > 0" :style="{'background': getTheme.background_gradient_btn,'color': getTheme.main_text}" class="u-btn box-grow-1"  @click="clickAttr(1)">
                        立即购买
                    </view>
                    <view v-else class="u-btn u-oversell-btn box-grow-1" >已售罄</view>
                </view>
            </view>
            <!--快捷导航-->
            <app-quick-navigation></app-quick-navigation>
        </view>
        <app-close v-if="showClose" :modal="false" @update="getMall"></app-close>
    </app-layout>
</template>

<script>
    import {mapState, mapGetters} from 'vuex';
    import appBanner from '../../../components/page-component/goods/app-goods-banner.vue';
    import uAttr from '@/components/page-component/goods/u-attr.vue';
    import appGoodsFullReduce from "../../../components/page-component/goods/app-goods-full-reduce.vue";
    import bdInfo from '@/components/page-component/goods/bd-info';
    import bdCoupon from '@/components/page-component/goods/bd-coupon.vue';
    import bdXbc from '@/components/page-component/goods/bd-xbc.vue';
    import bdKb from '@/components/page-component/goods/bd-kb.vue';
    import bdHc from '@/components/page-component/goods/bd-hc.vue';
    import bdDetail from '@/components/page-component/goods/bd-detail.vue';
    import bdComments from '@/components/page-component/goods/bd-comments.vue';
    import appClose from '@/components/basic-component/app-close/app-close.vue';
    import bdService from '@/components/page-component/goods/bd-service.vue';
    import appSellTip from '@/components/page-component/goods/app-sell-tip.vue';
	import goodsMixin from '@/core/goods-mixin.js';
    import appQuickNavigation from "@/components/page-component/app-quick-navigation/app-quick-navigation.vue";

    export default {
        name: 'goods',
		mixins: [goodsMixin],
        data() {
            return {
                is_show_price: false,
                showClose: false,
                is_open: 0,
                goods: {
                    id: '',
                    name: '',
                    cover_pic: '',
                    price: '',
                    section: []
                },
                webUrl: '',
                previewUrl: this.$api.weekly_buy.order_preview,
                submitUrl: this.$api.weekly_buy.order_submit,
                attrShow: false,
                list: [],
                totalNumber: 0,
                poster_config: this.$api.weekly_buy.poster_config,
                poster_generate: this.$api.weekly_buy.poster_generate,
                url: this.$api.weekly_buy.poster,
                goods_id: -1,
                loading: false,
                first: true,
                is_vip: false,
                is_vip_card_user: 0,
                discount: null,
                full_reduce: null,
                flash_sale: null,
                reset_time: null,
                checked: null,
                group: null,
                attr_index: 0,
                choose_group: null,
                choose_number: 1,
                week: null,
                day: '00',
                hour: '00',
                min: '00',
                sec: '00',
            }
        },
        onHide() {
            clearInterval(this.reset_time);
        },
        onUnload() {
            clearInterval(this.reset_time);
        },
        onLoad(options) { this.$commonLoad.onload(options);
            let that = this;
            that.goods_id = options.goods_id > 0 ? options.goods_id : options.id;
            that.webUrl = '/plugins/weekly_buy/goods/goods?goods_id=' + that.goods_id;
            // #ifdef MP-WEIXIN
            wx.showShareMenu({
                menus: ['shareAppMessage', 'shareTimeline']
            })
            // #endif
            this.$storage.removeStorageSync('week_time');
            that.$showLoading({
                type: 'global',
                text: '加载中...'
            });
            that.request({
                url: that.$api.weekly_buy.detail,
                data: {
                    goods_id: that.goods_id,
                }
            }).then(response => {
                that.first = false;
                that.goods = response.goods;
                let time = response.goods.plugin.reset_time
                if(response.goods.plugin.reset_time > 0) {
                    this.reset_time = setInterval(() =>{
                        time--;
                        if (time < 0) {
                            clearInterval(this.reset_time);
                        }
                        let day = parseInt((time/60/60/24));
                        let hour = parseInt((time/60/60)%24);
                        let min = parseInt((time/60)%60);
                        let sec = parseInt(time%60);
                        this.day = day < 10 ? '0' + day : day;
                        this.hour = hour < 10 ? '0' + hour : hour;
                        this.min = min < 10 ? '0' + min : min;
                        this.sec = sec < 10 ? '0' + sec : sec;
                    },1000);
                }
                if(that.goods.vip_card_appoint.discount > 0) {
                    that.is_vip = true;
                    that.discount = that.goods.vip_card_appoint.discount
                }
                that.is_vip_card_user = that.goods.vip_card_appoint.is_vip_card_user;
                that.loading = true;

                that.week = that.goods.plugin.list.length < 8 ? that.goods.plugin.list[0] : null
                that.$hideLoading();
                // #ifdef H5
                that.hShareAppMessage();
                // #endif
            });
        },
        onShow() {
            this.showClose = false;
            setTimeout(()=>{
                this.showClose = true;
            })
            if(this.first) {
                return false
            }
            let attr = JSON.parse(JSON.stringify(this.goods.attr));
            let attr_groups = JSON.parse(JSON.stringify(this.goods.attr_groups));
            this.$showLoading();
            this.$nextTick(() => {
                let that = this;
                that.request({
                    url: that.$api.weekly_buy.detail,
                    data: {
                        goods_id: that.goods_id,
                    }
                }).then(response => {
                    that.goods = response.goods;
                    that.goods.attr = attr;
                    that.goods.attr_groups = attr_groups;
                    let time = response.goods.plugin.reset_time
                    if(response.goods.plugin.reset_time > 0) {
                        this.reset_time = setInterval(() =>{
                            time--;
                            if (time < 0) {
                                clearInterval(this.reset_time);
                            }
                            let day = parseInt((time/60/60/24));
                            let hour = parseInt((time/60/60)%24);
                            let min = parseInt((time/60)%60);
                            let sec = parseInt(time%60);
                            this.day = day < 10 ? '0' + day : day;
                            this.hour = hour < 10 ? '0' + hour : hour;
                            this.min = min < 10 ? '0' + min : min;
                            this.sec = sec < 10 ? '0' + sec : sec;
                        },1000);
                    }
                    this.$hideLoading();
                    if(this.$storage.getStorageSync('week_time')) {
                        this.week = this.$storage.getStorageSync('week_time')
                    }
                });
            })
        },
        computed: {
            ...mapState({
				isTip: state => state.mallConfig.mall.setting.is_remind_sell_time,
                buy_goods_auth_link: state => state.mallConfig.mall.setting.buy_goods_auth_link,
                buy_goods_auth_text: state => state.mallConfig.mall.setting.buy_goods_auth_text,
                mall: state => state.mallConfig.mall,
            }),
            ...mapGetters('mallConfig', {
                getTheme: 'getTheme',
            }),
            totalPrice() {
                let price = 0;
                if(this.choose_group) {
                    price = this.goods.level_show == 1 ? this.choose_group.price_member : +this.choose_group.price;
                }
                let total = '0.00';
                if(price > 0) {
                    total = (+price * +this.group.number * +this.choose_number).toFixed(2)
                }
                return total
            },
			uBottomHeight() {
				if (this.full_reduce && this.goods.sell_time > 0) {
					return 'u-bottom-height-2';
				} else if (this.full_reduce || this.goods.sell_time > 0) {
					return 'u-bottom-height-1';
				} else {
					return 'u-bottom-height-0';
				}
			},
			leftTip() {
				let leftTip = '';
				if (!(this.isTip == 0 && this.goods.sell_time > 0)) {
					leftTip = 'bd-btn-left bd-btn-half';
				} else {
					leftTip = 'box-grow-1';
				}
				return this.goods && this.goods.type === 'goods' ? leftTip : '';
			},
			disableBtn() {
				return this.goods.is_finish_sell ? 'btn-finish-sell' : 'bd-oversell-btn';
			},
			showRight() {
				return !(this.isTip == 0 && this.goods.sell_time > 0)
			},
			remindParams() {
				return {
					sell_time: this.goods.sell_time,
					goods_id: this.goods.id,
					template_message_list: this.goods.template_message_list,
					buy_text: '立即购买'
				};
			},
        },
        // #ifdef MP-WEIXIN
        onShareTimeline() {
            // 分享朋友圈beta
            return this.$shareTimeline({
                title: this.goods.app_share_title ? this.goods.app_share_title : this.goods.name,
                imageUrl: this.goods.pic_url[0].pic_url,
                query: {
                    goods_id: this.goods.id
                }
            });
        },
        // #endif
        // #ifdef MP
        onShareAppMessage() {
            return this.hShareAppMessage();
        },
        // #endif
        methods: {
            toChooseTime() {
                uni.navigateTo({
                    url: `/plugins/weekly_buy/time/time?list=` + JSON.stringify(this.goods.plugin.list)
                });
            },
            showAllDate() {
                uni.navigateTo({
                    url: `/plugins/weekly_buy/time/time?list=` + JSON.stringify(this.goods.plugin.type_list) + `&date=` + this.goods.plugin.list[0].least_time
                });
            },
            rightFunc(data) {
                let goods = data;
                if(!this.week) {
                    uni.showToast({
                        title: '请选择配送日期',
                        icon: 'none',
                        duration: 1000
                    });
                    return false;
                }
                goods.goods_list[0].id = this.choose_group.goods_id;
                goods.goods_list[0].attrs = this.choose_group.attr_list;
                goods.goods_list[0].goods_attr_id = this.choose_group.id;
                goods.goods_list[0].week_key = this.week.week_key;
                this.attrShow = !this.attrShow;
                uni.navigateTo({
                    url: `/pages/order-submit/order-submit?mch_list=${JSON.stringify([goods])}&preview_url=${encodeURIComponent(this.$api.weekly_buy.order_preview)}&submit_url=${encodeURIComponent(this.$api.weekly_buy.order_submit)}&plugin=weekly_buy`
                });
            },
            chooseWeek(item) {
                this.week = item;
            },
            storeAttr(item) {
                if(item) {
                    this.group = item;
                    this.choose_group = item.attr[this.attr_index];
                }else {
                    this.group = this.group ? this.group : this.goods.groups[0];
                    this.choose_group = this.group.attr[this.attr_index];
                }
            },
            // 规格选择
            check({item,number}) {
                this.choose_number = number;
                this.checked = item;
                if(item) {
                    for(let i in this.goods.attr) {
                        if(this.checked.id == this.goods.attr[i].id) {
                            this.attr_index = i;
                        }
                    }
                    this.storeAttr();
                }
            },
            hShareAppMessage(s = false){
                return this.$shareAppMessage({
                    path: '/plugins/weekly_buy/goods/goods',
                    title: this.goods.app_share_title ? this.goods.app_share_title : this.goods.name,
                    imageUrl: this.goods.app_share_pic ? this.goods.app_share_pic : this.goods.pic_url[0].pic_url,
                    desc: this.goods.subtitle,
                    params: {
                        goods_id: this.goods.id
                    }
                }, s);
            },
            getMall(e) {
                this.is_open = e.is_open;
            },
            setCoupon(index) {
                this.$set(this.goods.goods_coupon_center[index], 'is_receive', 1);
            },
            clickAttr(data) {
                if (!this.goods.buy_goods_auth) {
                    this.$tips.showToast({
                        title: '您暂无权限购买该商品',
                        icon: 'none'
                    });
                    return;
                }
				if (data === 1 && this.goods.sell_time > 0) {
					this.rightTip();
					return ;
				}
                this.attrShow = !this.attrShow;
            },
            favorite() {
                let url = this.$api.user.favorite_add;
                let favorite = true;
                if (this.goods.favorite) {
                    url = this.$api.user.favorite_remove;
                    favorite = false;
                }
                this.goods.favorite = favorite;
                this.$request({
                    url: url,
                    data: {
                        goods_id: this.goods.id,
                    }
                }).then(response => {
                    if (response.code === 0) {
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: response.msg,
                            showCancel: false,
                        });
                    }
                }).catch(e => {
                });
            },

            back() {
                uni.reLaunch({
                    url: '/pages/index/index'
                });
            },

            async request({url, data}) {
                const response = await this.$request({
                    url: url,
                    data: data,
                });
                if (response.code === 0) {
                    return response.data;
                }else {
                    uni.showToast({
                        title: response.msg,
                        icon: 'none',
                        duration: 1000
                    });
                    setTimeout(()=>{
                        uni.navigateBack();
                    },1000)
                }
            },
            router(url) {
                uni.navigateTo({
                    url: url
                })
            },
			changeTime(time) {
				this.goods.sell_time = time;
			},
        },
        components: {
            'app-banner': appBanner,
            'u-attr': uAttr,
            'app-goods-full-reduce': appGoodsFullReduce,
            appClose,
            bdInfo,
            bdCoupon,
            bdXbc,
            bdKb,
            bdHc,
            bdDetail,
            bdComments,
            bdService,
			appSellTip,
			'app-quick-navigation': appQuickNavigation,
        }
    }
</script>

<style scoped lang="scss">
    .total {
        width: 702rpx;
        margin: 0 24rpx;
        height: 84rpx;
        font-size: 28rpx;
        border-top: 1rpx solid rgba(0,0,0,.1);
        color: #333333;
        .price {
            color: #FF4544;
        }
        .number {
            color: #999999;
            margin-right: 20rpx;
        }
    }
    .procedure {
        background-color: #fff;
        margin: 0 24rpx;
        width: 702rpx;
        border-radius: 16rpx;
        height: 126rpx;
        image {
            width: 566rpx;
            height: 78rpx;
        }
    }
    .group {
        margin:24upx 32upx 0 32upx;
        .group-name {
            margin-bottom: 20upx;
            font-size: 24rpx;
            color: #666666;
            .week-type {
                color: #999999;
                margin-left: 20rpx;
            }
            >image {
                display: block;
                width: 22rpx;
                height: 22rpx;
                margin-left: 40rpx;
                margin-right: 10rpx;
            }
            .week-last {
                color: #FF812D;
            }
            .show-all-date {
                font-size: 24rpx;
                color: #FF4544;
                >image {
                    width: 19rpx;
                    height: 28rpx;
                    margin-left: 10rpx;
                }
            }
        }
        .group-item {
            padding: 15upx 24upx;
            border-radius: 8upx;
            margin:0 20upx 20upx 0;
            font-size: 24upx;
            border: 2upx solid;
            &.checked {
                color: #ffffff;
            }
            &.unchecked {
                background-color: #f2f2f2;
                color: #353535;
            }
            .arrow {
                width: 19rpx;
                height: 28rpx;
                margin-left: 10rpx;
            }
        }
    }
    .price {
        font-size: 26rpx;
        .big-text {
            font-size: 36rpx;
            font-weight: bold;
            font-family: Alibaba;
            margin: 0 5rpx;
        }
    }
    .vip-card {
        padding-bottom: #{20rpx};
        background-color: #fff;
    }
    .banner {
        .reset-area {
            position: relative;
            width: 100%;
            height: 100rpx;
            image {
                height: 100%;
                width: 100%;
            }
            .reset-time {
                position: absolute;
                bottom: 0;
                right: 0;
                width: 100%;
                height: 100rpx;
                padding: 0 24rpx 0 254rpx;
                z-index: 100;
                font-size: 24rpx;
                color: #333333;
                .time {
                    height: 40rpx;
                    width: 40rpx;
                    line-height: 40rpx;
                    background-color: #333333;
                    color: #fff;
                    text-align: center;
                    border-radius: 6rpx;
                    font-size: 26rpx;
                    margin: 0 8rpx;
                }
            }
        }
    }

    .app-goods {
        background-color: #f7f7f7;
    }
    .bd-bottom {
        width: 750upx;
        height: 110upx;
        padding: 20upx 24upx;
    }

    .bd-back {
        width: 66upx;
        height: 100%;
        margin-right: 20upx;
    }
    .u-btn {
        line-height: 70upx;
        color: #ffffff;
        font-size: 28upx;
        text-align: center;
        border-radius: 35upx;
    }
    .bd-icon {
        width: 30upx;
        height: 30upx;
        margin-bottom: 8upx;
    }
    .bd-text {
        font-size: 20upx;
        color: #888888;
        line-height: 1;
    }
    .bd-btn {
        text-align: center;
        line-height: 70upx;
        font-size: 26upx;
        border-radius: 35upx;
    }
    .bd-btn-left {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .bd-btn-right {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .bd-btn-half {
        width: 50%;
    }
    .bd-btn-color {
        color: #ffffff;
    }
    .bd-oversell-btn {
        background-color: #CDCDCD;
    }
    .bd-content-radius-0 {
        border-radius: 35upx 0 0 35upx;
    }
    .bd-content-radius-1 {
        border-radius:0 35upx 35upx 0;
    }
    .bd-btn-tel {
        >view {
            line-height: 70upx;
            text-align: center;
        }
        .tel {
            border-top-left-radius: 35upx;
            border-bottom-left-radius: 35upx;
        }
        .contact {
            padding: 0;
            height: 70upx;
            line-height: 70upx;
            margin: 0;
            border: none;
        }
        .service {
            border-top-right-radius: 35upx;
            border-bottom-right-radius: 35upx;
        }
        .all-radius {
            border-radius: 35upx;
        }
        .all-width {
            width: 100%;
        }
        .bd-three-one {
            width: calc(100%/3);
        }
        .bd-no-radius {
            border-radius: 0;
        }
    }
    .product-list {
        background-color: white;
    }

    .join-member {
        background-color: #ffffff;
        padding: 0 #{24rpx};
    }
    .text {
        color: #ffffff;
    }
    .default-bakground {
        background-color: #446dfd;
        color: #ffffff;
    }
    .u-bottom-fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1500;
        background-color: #ffffff;
    }
    .u-bottom-height-0 {
        height: 110upx;
    }
    .u-bottom-height-1 {
        height: 190upx;
    }
    .goods-margin {
        margin-top: 20upx;
    }

    .text {
        color: #ffffff;
    }
	.btn-finish-sell {
		background: linear-gradient(to right, rgba(153, 153, 153, 1), rgba(153, 153, 153, 0.7)) ;
	}
    .u-bottom-height-2 {
        height: 270upx;
    }
</style>